<template>
    <!-- 这个是最外层的容器 -->
    <div class="wl-pager" :class="{
        [`wl-pager--${type}`]: type,
        [`wl-pager--${size}`]: size
    }">
        <!-- 首页 -->
        <a :class="currentPage === 1 ? 'disabled' : ''" @click="goPage(1, currentPage === 1)">首页</a>
        <!-- 上一页 -->
        <a :class="currentPage === 1 ? 'disabled' : ''" @click="goPage(currentPage - 1, currentPage === 1)">
            <wl-icon icon="angles-left"></wl-icon>
        </a>

        <!-- 重点是中间如果进行渲染 -->
        <!-- 我们需要根据计算出来的pager进行渲染 -->
        <a v-if="total > pagerCount && currentPage > 5" @click="goPage(1)">1</a>
        <a v-if="total > pagerCount && currentPage > 5">
            <wl-icon icon="ellipsis" size="sm"></wl-icon>
        </a>
        <a v-for="page in pager" :key="page" :class="page === currentPage ? 'active' : ''" @click="goPage(page)">
            {{ page }}
        </a>

        <a v-if="total > pagerCount && currentPage < total - 4">
            <wl-icon icon="ellipsis" size="sm"></wl-icon>
        </a>
        <a v-if="total > pagerCount && currentPage < total - 4" @click="goPage(total)">
            {{ total }}
        </a>
        <!-- 下一页 -->
        <a :class="currentPage === total ? 'disabled' : ''" @click="goPage(currentPage + 1, currentPage === total)">
            <wl-icon icon="angles-right"></wl-icon>
        </a>
        <!-- 尾页 -->
        <a :class="currentPage === total ? 'disabled' : ''" @click="goPage(total, currentPage === total)">尾页</a>

    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import propObj from './props';
defineOptions({
    name: 'wl-pager'
})
const props = defineProps(propObj)
const emit = defineEmits<{
    (e: 'currentChange', page: number): void;
}>()
// 接下来需要对页码进行相关的计算
const pager = computed(() => {
    // 该数组用于存放要渲染的页码
    const renderPage = []
    // 可以全部渲染的情况
    if (props.total <= props.pagerCount) {
        for (let i = 1; i <= props.total; i++) {
            renderPage.push(i)
        }
    } else {
        // 说明总页码数是大于可渲染页码数，无法全部渲染，只能渲染一部分
        // 这里又分为3中情况
        //1.当前页比较靠前 [1] 2 3 4 5 ... 20
        // 2.当前页比较靠中间 1 。。。5 6 【7】 8 9 。。。20
        // 3.当前页比较靠后 1.。。。16 17 18 19 【20】
        if (props.currentPage <= 5) {
            // 当前页比较靠前
            for (let index = 1; index <= 5; index++) {
                renderPage.push(index)
            }

        } else if (props.currentPage >= props.total - 4) {
            // 当前页比较靠后

            for (let index = props.total - 4; index <= props.total; index++) {
                renderPage.push(index)
            }
        } else {
            // 当前页比较靠中间
            for (let index = props.currentPage - 2; index <= props.currentPage + 2; index++) {
                renderPage.push(index)
            }
        }

    }
    return renderPage
})
function goPage(page: number, disabled?: boolean): void {
    if (disabled) {
        return
    }
    emit('currentChange', page)
}
</script>

<style scoped lang="scss"></style>